<template>
  <div class="main">
    <div class="envelope">
      <div class="header">
        <h2>捐助我们</h2>
      </div>
      <div class="content">
        <h3>关爱动物 奉献爱心</h3>
        <p>
          发兰卡威发发兰卡威发发兰卡威发发发发兰卡威发发兰卡威发发发兰卡威发发兰卡威发兰卡威发发兰卡威发发兰卡威发发兰卡威发发兰卡威发发兰卡威发
        </p>
        <p>
          安份未发未发兰卡威发阿发兰卡威发发兰卡威发发兰卡威发发兰卡威发发兰卡威发发兰卡威发文
        </p>
        <p>
          来自世界各地的朋友们，我们真诚地欢迎和感谢您，用您力所能及的帮助给可爱的大熊猫奉献一份爱心，增添一份希望。
        </p>
        <div class="juanzhu-button">
          <el-button type="success" @click="juanzhuHandler">
            捐助我们
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    juanzhuHandler() {
      this.$storage.set("paytable", "juanzhu");
      this.$router.push("/pay");
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 0px;
  background: url(../../../assets/img/捐助我们.jpeg) no-repeat;
  background-size: 100% 130%;
  background-attachment: fixed;
  background-position: 0 -200px;
  height: 100%;
  width: 100%;
  overflow: auto;
  filter: brightness(90%);
  .envelope {
    width: 880px;
    min-height: 800px;
    margin: 500px auto 50px;
    background: #fff;
    opacity: 0.9;
    border-radius: 15px;

    .header {
      margin: 0 15px;
      padding: 15px 0 15px 10px;
      border-bottom: 2px solid #2e2;
      color: #333;
    }
    .content {
      padding: 10px 20px;
      font-size: 17px;
      line-height: 25px;
      h3 {
        font-size: 24px;
        line-height: 70px;
        text-align: center;
      }
      p {
        text-indent: 34px;
        margin-bottom: 30px;
      }
      .juanzhu-button {
        float: right;
      }
    }
  }
}
</style>